<title>主页二</title>

<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>主页</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">
          今日出库数(笔)
          <span class="layui-badge layui-bg-blue layuiadmin-badge">日</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">


          <p class="layuiadmin-big-font" id="TodayBusStockOut" class="TodayBusStockOut"></p>

          <p>
            总计出库数(笔)
            <span class="layuiadmin-span-color" id="TotalBusStockOut" class="TotalBusStockOut"></span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">
          今日入库数(笔)
          <span class="layui-badge layui-bg-blue layuiadmin-badge">日</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font" id="TodayBusStockIn" class="TodayBusStockIn"></p>
          <p>
            总计入库数(笔)
            <span class="layuiadmin-span-color" id="TotalBusStockIn" class="TotalBusStockIn"></span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">
          今日货权转移数(笔)
          <span class="layui-badge layui-bg-blue layuiadmin-badge">日</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">

          <p class="layuiadmin-big-font" id="TodayOilTransfer" class="TodayOilTransfer"></p>
          <p>
            总计货权转移数(笔)
            <span class="layuiadmin-span-color" id="TotalOilTransfer" class="TotalOilTransfer"></span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">
          今日出库未审核数(笔)
          <span class="layui-badge layui-bg-blue layuiadmin-badge">日</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">

          <p class="layuiadmin-big-font" id="TodayBusStockOutUnaudited" class="TodayBusStockOutUnaudited"></p>
          <p>
            总计出库未审核数(笔)
            <span class="layuiadmin-span-color" id="TotalBusStockOutUnaudited" class="TotalBusStockOutUnaudited"></span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-row layui-col-space15">
      <div class="layui-col-sm6" style="height: 200px;">
        <div class="layui-card">
          <div class="layui-card-header">入库的数量</div>
          <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="searchform">
            <div class="layui-form-item">


              <!-- </div>
                <div class="layui-inline"> -->
              <!-- <label class="layui-form-label" for="OilNo">油品：</label>
                <div class="layui-input-inline" style="width:70px;">
                  <select name="l_OilAbbr" id="l_OilNo" style="width:50px;" lay-filter="OilNo">
                  </select>
                </div> -->

              <div class="layui-inline">
                <button type="button" class="layui-btn" data-type="reload1" id="reload1"><i
                    class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
              </div>
            </div>
          </div>


          <!-- <div class="layui-card-body"> -->
          <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
            lay-filter="LAY-index-normcol">
            <div carousel-item id="Sch_carousel">
              <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
            </div>
          </div>
          <!-- </div> -->
        </div>
      </div>
      <div class="layui-col-sm6" style="height: 200px;">
        <div class="layui-card">
          <div class="layui-card-header">当日客户提油排名</div>
          <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="searchform">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label" for="StartTime">计划时间：</label>
                <div class="layui-input-inline" style="width:100px;">
                  <input type="text" name="l_StartTime" id="l_StartTime" lay-verify="datetime" placeholder="yyyy-MM-dd"
                    autocomplete="off" class="layui-input">
                </div>

                <!-- </div>
              <div class="layui-inline"> -->
                <label class="layui-form-label" for="OilNo">油品：</label>
                <div class="layui-input-inline" style="width:70px;">
                  <select name="l_OilAbbr" id="l_OilNo" style="width:50px;" lay-filter="OilNo">
                  </select>
                </div>
              </div>
              <div class="layui-inline">
                <button type="button" class="layui-btn" data-type="reload" id="reload"><i
                    class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
              </div>
            </div>
          </div>


          <!-- <div class="layui-card-body"> -->
          <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
            lay-filter="LAY-index-normcol">

            <div carousel-item id="BusStockOutOrder">
              <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
            </div>
          </div>

          <!-- </div> -->
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  layui.use('sample', layui.factory('sample'));
  layui.use(['table', 'form', 'echarts', 'laydate'], function () {
    var table = layui.table;
    var form = layui.form;
    var echarts = layui.echarts;
    var laydate;
    if (!laydate)
      laydate = layui.laydate;

    //入库笔数类型
    var l_BusStockInData = {
      "Type": 0
    }
    //出库笔数 类型
    var l_BusStockOutData = {
      "Type": 1
    }
    //提油未审核笔数 类型
    var l_BusStockOutUnauditedData = {
      "Type": 2
    }
    //货权转移类型
    var l_TotalOilTransferData = {
      "Type": 3
    }
    var l_OilBusStockData = {
      "Type": 4
    }
    var l_OilBusStockOrderData = {

      "Type": 5
    }

    //加载查询条件下拉选项
    function initSelect() {

      //Common.js 已写好油品下拉
      var l_OilID = "l_OilNo"; //油品的ID
      OilInit(l_OilID);
      //创建获取油品信息的json  文档里面有
      function OilInit(v_OilID, v) {
        var l_SearchOilJson = {
          "Token": {
            "OperatorName": "",
            "OperatorNo": "",
            "DepotNo": "",
            "SystemType": "",
            "TokenStr": layui.setter.tokenstr,
            "Version": "1.0"
          },
          "Data": {
            "Used": 0
          }
        };

        l_SearchOilJson = JSON.stringify(l_SearchOilJson);
        $.ajax({
          url: layui.setter.url + '/SysDict/GetOilInfo',
          type: 'post',
          dataType: 'json',
          contentType: 'application/json',
          data: l_SearchOilJson,
          async: false,
          success: function (data) {
            //debugger;
            var l_Result = data.Data;
            $("#" + v_OilID).empty();
            for (var i = 0; i < l_Result.length; i++) {
              var str = "<option value='" + l_Result[i].oilNo + "'>" + l_Result[i].oilAbbr + "</option>";
              if (v && $.trim(v) == l_Result[i].oilNo) {
                str = "<option value='" + l_Result[i].oilNo + "' selected>" + l_Result[i].oilAbbr + "</option>";
              }
              $("#" + v_OilID).append(str);
            }
          }
        });
      }



      form.render('select', 'searchform');

    }

    initSelect();


    //执行一个laydate实例
    laydate.render({
      elem: '#l_StartTime' //指定元素
      , type: 'date'
      //, trigger: 'click'
    });
    //编辑查询条件的'send'的json ，文档会提供例子， 修改一下就行了
    var l_StartTime = null;
    var l_EndTime = null;



    //点击查询按钮需要做的事情 基本可以参考上面的代码
    $('#reload').on('click', function () {
      if (($('#l_StartTime').val()).length != 0) {
        l_StartTime = $('#l_StartTime').val() + ' ' + '00:00:00';
        l_EndTime = $('#l_StartTime').val() + ' ' + '23:59:59';

      } else {
        l_StartTime = null;
        l_EndTime = null;
      }

      $.ajax({

        url: layui.setter.url + "/SystemInfo/showOilInfo",
        contentType: 'application/json',
        type: "post",
        dataType: "json",
        data: JSON.stringify(l_SearchJson = {
          "Token": {
            "OperatorName": "",
            "OperatorNo": "",
            "DepotNo": "",
            "SystemType": "",
            "TokenStr": layui.setter.tokenstr,
            "Version": "1.0"
          },
          "Data": {
            "StartTime": l_StartTime,
            "EndTime": l_EndTime,
            "OilNo": $('#l_OilNo').val(),
            "Type": 5
          }
        }),
        success: function (data) {
          //获取当前的数据
          var l_RegisterModel = data.Data;
          //总数量
          var l_CustomerName = new Array();
          //油品名称
          var l_OillAbbr = new Array();
          //客存量
          var l_ActualOutStock = new Array();

          var l_Sum = 0;

          for (var i = 0; i < l_RegisterModel.length; i++) {
            l_OillAbbr.push(l_RegisterModel[i].OilAbbr)
            l_ActualOutStock.push(l_RegisterModel[i].ActualOutStock);
            l_CustomerName.push(l_RegisterModel[i].CustomerName);

            l_Sum += l_RegisterModel[i].ActualOutStock;

          }

          l_ActualOutStock.push(l_Sum);
          l_CustomerName.push('总量');
          option = {
            title: {
              text: $("#l_OilNo option:selected").text(),
              left: 'center',
              top: 'center',
              textStyle: {
                color: 'black',        //颜色  //粗细
                //字体
                fontSize: 23,     //大小
                align: 'center'   //水平对齐
              }
            },
            color: ['#4cabce', '#006699'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            // grid: {
            //   left: '3%',
            //   right: '4%',
            //   bottom: '3%',
            //   containLabel: true
            // },
            xAxis: {
              type: 'value',
            },
            yAxis: {
              type: 'category',
              data: l_CustomerName
            },
            barWidth: 30,
            barGap: '50%',
            series: [

              {
                name: '总数',
                barCategoryGap: '50%',
                type: 'bar',
                label: {

                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: '#009688',
                    fontSize: 16,
                  }
                },
                data: l_ActualOutStock
              }
            ]
          };
          //创建一个实例
          var div1 = $('#BusStockOutOrder').children('div');
          var myChart1 = echarts.init(div1[0], layui.echartsTheme)
          myChart1.setOption(option);


        }


      });
    });



    $.ajax({
      url: layui.setter.url + "/SystemInfo/showOilInfo",
      contentType: 'application/json',
      type: "post",
      dataType: "json",
      data: JSON.stringify(getSearchParamCommon(l_BusStockInData)),
      success: function (data) {
        var l_RegisterModel = data.Data

        // 今日入库笔数
        $('#TodayBusStockIn').text(l_RegisterModel.TodayBusStockIn);

        // 总入库笔数
        $('#TotalBusStockIn').text(l_RegisterModel.TotalBusStockIn);
      }
    })

    $.ajax({
      url: layui.setter.url + "/SystemInfo/showOilInfo",
      contentType: 'application/json',
      type: "post",
      dataType: "json",
      data: JSON.stringify(getSearchParamCommon(l_BusStockOutData)),
      success: function (data) {
        var l_RegisterModel = data.Data


        // 今日出笔数
        $('#TodayBusStockOut').text(l_RegisterModel.TodayBusStockOut);

        // 总出库笔数
        $('#TotalBusStockOut').text(l_RegisterModel.TotalBusStockOut);
      }
    })

    $.ajax({
      url: layui.setter.url + "/SystemInfo/showOilInfo",
      contentType: 'application/json',
      type: "post",
      dataType: "json",
      data: JSON.stringify(getSearchParamCommon(l_BusStockOutUnauditedData)),
      success: function (data) {
        var l_RegisterModel = data.Data


        // 今日提油未审核笔数
        $('#TodayBusStockOutUnaudited').text(l_RegisterModel.TodayBusStockOutUnaudited);

        // 总提油未审核笔数
        $('#TotalBusStockOutUnaudited').text(l_RegisterModel.TodayBusStockOutUnaudited);
      }
    })


    $.ajax({
      url: layui.setter.url + "/SystemInfo/showOilInfo",
      contentType: 'application/json',
      type: "post",
      dataType: "json",
      data: JSON.stringify(getSearchParamCommon(l_TotalOilTransferData)),
      success: function (data) {
        var l_RegisterModel = data.Data


        // 今日货权转移笔数
        $('#TodayOilTransfer').text(l_RegisterModel.TodayOilTransfer);

        // 总获取转移笔数
        $('#TotalOilTransfer').text(l_RegisterModel.TotalOilTransfer);
      }
    });
    ShowOilInfo();


    function ShowOilInfo() {
      $.ajax({
        url: layui.setter.url + "/SystemInfo/showOilInfo",
        contentType: 'application/json',
        type: "post",
        dataType: "json",
        data: JSON.stringify(getSearchParamCommon(l_OilBusStockData)),
        success: function (data) {
          //获取当前的数据
          var l_RegisterModel = data.Data;
          //总数量
          var l_AllCustStock = new Array();
          //油品名称
          var l_OillAbbr = new Array();
          //客存量
          var l_CustStock = new Array();

          for (var i = 0; i < l_RegisterModel.length; i++) {
            l_OillAbbr.push(l_RegisterModel[i].OilAbbr)
            l_AllCustStock.push(l_RegisterModel[i].AllCustStock);
            l_CustStock.push(l_RegisterModel[i].CustStock)

          }

          //配置项
          option = {
            color: ['#4cabce', '#006699'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              show: true,
              data: ['客存', '总数']
            },
            //x轴
            xAxis: [
              {
                type: 'category',
                axisTick: { show: false },
                data: l_OillAbbr
              }
            ],
            //y轴
            yAxis: [
              {
                type: 'value'
              }
            ],
            //宽度：

            barWidth: 30,
            barGap: '30%',
            series: [
              {
                name: '客存',
                type: 'bar',

                barGap: 0,
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: '#009688',
                    fontSize: 16,
                  }
                },
                data: l_CustStock,
                barCategoryGap: '50%',
              },
              {
                name: '总数',
                type: 'bar',
                label: {

                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: '#009688',
                    fontSize: 16,
                  }
                },
                barCategoryGap: '50%',
                data: l_AllCustStock
              },

            ]
          };

          //创建一个实例
          var div = $('#Sch_carousel').children('div');
          var myChart = echarts.init(div[0], layui.echartsTheme)

          myChart.setOption(option);
        }
      });

    }
    showTotalOil();

    function showTotalOil() {

      $.ajax({

        url: layui.setter.url + "/SystemInfo/showOilInfo",
        contentType: 'application/json',
        type: "post",
        dataType: "json",
        data: JSON.stringify(l_SearchJson = {
          "Token": {
            "OperatorName": "",
            "OperatorNo": "",
            "DepotNo": "",
            "SystemType": "",
            "TokenStr": layui.setter.tokenstr,
            "Version": "1.0"
          },
          "Data": {

            "OilNo": $("#l_OilNo").val(),
            "Type": 5
          }
        }),
        success: function (data) {
          //获取当前的数据
          var l_RegisterModel = data.Data;
          //总数量
          var l_CustomerName = new Array();
          //油品名称
          var l_OillAbbr = new Array();
          //客存量
          var l_ActualOutStock = new Array();

          var l_Sum = 0;

          for (var i = 0; i < l_RegisterModel.length; i++) {
            l_OillAbbr.push(l_RegisterModel[i].OilAbbr)
            l_ActualOutStock.push(l_RegisterModel[i].ActualOutStock);
            l_CustomerName.push(l_RegisterModel[i].CustomerName);

            l_Sum += l_RegisterModel[i].ActualOutStock;

          }

          l_ActualOutStock.push(l_Sum);
          l_CustomerName.push('总量');
          option = {
            title: {
              text: $("#l_OilNo option:selected").text(),
              left: 'center',
              top: 'center',
              textStyle: {
                color: 'black',        //颜色  //粗细
                //字体
                fontSize: 23,     //大小
                align: 'center'   //水平对齐
              }
            },
            color: ['#4cabce', '#006699'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            // legend: {
            //   data:$("#l_OilNo option:selected").text()
            // },
            // grid: {
            //   left: '3%',
            //   right: '4%',
            //   bottom: '3%',
            //   containLabel: true
            // },
            xAxis: {
              type: 'value',
            },
            yAxis: {
              type: 'category',
              data: l_CustomerName
            },
            barWidth: 30,
            barGap: '50%',
            series: [

              {
                name: '总数',
                barCategoryGap: '50%',
                type: 'bar',
                label: {

                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: '#0309688',
                    fontSize: 16,
                  }
                },
                data: l_ActualOutStock
              }
            ]
          };
          //创建一个实例
          var div1 = $('#BusStockOutOrder').children('div');
          var myChart1 = echarts.init(div1[0], layui.echartsTheme)
          myChart1.setOption(option);


        }


      });

    }














  });



  function refresh() {
      //alert("sssss");
      $('#reload').click();
    }
    refresh1();

    function refresh1() {
      //alert("sssss");
     $('#reload1').click(function(){

      location.reload(true);
     });
    }













</script>